<template>
  <div class="resource">
    <el-form ref="form" inline :model="formMessage">
      <el-form-item label="手机号" prop="phone">
        <el-input type="text" v-model="formMessage.phone" placeholder="请输入手机号" clearable/>
      </el-form-item>
      <el-form-item label="注册时间" prop="createTime">
        <el-date-picker
          v-model="formMessage.createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="mt20">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column type="index" label="用户ID"></el-table-column>
        <el-table-column prop="portrait" label="头像">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.portrait" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="createTime" label="注册时间">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | formatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <i class="status" :class="{'status-success': scope.row.status === 'ENABLE', 'status-danger': scope.row.status === 'DISABLE'}" />
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleForbidUser(scope.row)">禁用</el-link>
            <el-link type="primary" class="ml10" @click="handleSetRole(scope.row.id)">分配角色</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt20">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formMessage.current"
        :page-sizes="[10,20,50,100]"
        :page-size="formMessage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTotal">
      </el-pagination>
    </div>

    <set-role :show="showSetRole" :user-id="selectUserId" @success="handleSearch" @close="showSetRole = false" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Form, Message } from 'element-ui'
import { enableUser, forbidUser, getUserPages } from '@/services/boss'
import SetRole from '@/pages/user/setRole.vue'

@Component({
  components: { SetRole }
})
export default class ResourcePage extends Vue {
  private formMessage: any = {
    phone: '',
    createTime: null,
    categoryId: '',
    current: 1,
    size: 10
  }

  private tableData: Array<any> = []
  private loading = false
  private dataTotal = 0
  private selectUserId: number | undefined
  private showSetRole = false

  handleSearch () {
    this.formMessage.current = 1
    this.handleGetData()
  }

  async handleGetData () {
    const params: any = {
      phone: this.formMessage.phone,
      currentPage: this.formMessage.current,
      pageSize: this.formMessage.size
    }
    if (this.formMessage.createTime) {
      params.startCreateTime = this.formMessage.createTime[0]
      params.endCreateTime = this.formMessage.createTime[1]
    }
    this.loading = true
    try {
      const { data } = await getUserPages(params)
      this.tableData = data.records
      this.dataTotal = data.total
    } catch (e: any) {
      Message.error(e.message)
    } finally {
      this.loading = false
    }
  }

  handleReset () {
    (this.$refs.form as Form).resetFields()
    this.handleSearch()
  }

  handleCurrentChange (current: number) {
    this.formMessage.current = current
    this.handleGetData()
  }

  handleSizeChange (size: number) {
    this.formMessage.current = 1
    this.formMessage.size = size
    this.handleGetData()
  }

  async handleForbidUser (row: any) {
    const { id, status } = row
    const content = `确认${status === 'ENABLE' ? '禁用' : '启用'}用户 ${row.name} 吗？`
    await this.$confirm(content, '提示', {
      closeOnClickModal: false
    })
    try {
      if (status === 'ENABLE') {
        await forbidUser({ userId: id })
      } else {
        await enableUser({ userId: id })
      }
      Message.success('操作成功')
      await this.handleGetData()
    } catch (e) {
      console.error(e)
      Message.error('操作失败')
    }
  }

  handleSetRole (userId: number) {
    this.selectUserId = userId
    this.showSetRole = true
  }

  async mounted () {
    this.handleSearch()
  }
}
</script>

<style scoped>

</style>
